import { useEffect, useState } from 'react'

const PositionInputDemo = () => {
  let [x, setX] = useState(0)
  let [y, setY] = useState(0)
  useEffect(() => {
    console.log('mount only', `x=${x}, y=${y}`)
  }, [])
  useEffect(() => {
    console.log('mount, update x only', `x=${x}`)
  }, [x])
  useEffect(() => {
    console.log('mount, update y only', `y=${y}`)
  }, [y])
  useEffect(() => {
    console.log('mount, update x y both', `x=${x}, y=${y}`)
  }, [x, y])

  return (
    <div>
      <h3>
        x={x}, y={y}
      </h3>
      <div>
        <label>
          x:{' '}
          <input
            type="text"
            onChange={(e) => {
              setX(+e.target.value || 0)
            }}
          />
        </label>
      </div>
      <div>
        <label>
          y:{' '}
          <input
            type="text"
            onChange={(e) => {
              setY(+e.target.value || 0)
            }}
          />
        </label>
      </div>
    </div>
  )
}

export default PositionInputDemo
